/**
 * Created by 69466 on 2018/9/13.
 */
import React, {Component} from 'react';
import {FlatList, StyleSheet} from 'react-native';
import {Dialog, Text, TouchableOpacity, View, Button} from 'react-native-ui-lib';
import {commonStyles} from '../../configs/commonStyle';
import {inject, observer} from 'mobx-react';
import moment from 'moment';
import ListSeparator from './ListSeparator';
import DatePicker from 'react-native-datepicker';

/**
 * 筛选列表
 */
@inject('userStore')
@observer
export default class DateFilterDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showEmpty: false,
            isOpen: false,
            start: '',
            end: '',
            selectIndex: 3,
            dateTypes: [
                {
                    title: '昨天',
                },
                {
                    title: '今天',
                },
                {
                    title: '上周',
                },
                {
                    title: '本周',
                },
                {
                    title: '上月',
                },
                {
                    title: '本月',
                },
            ],
        };
    }

    show = (start, end) => {
        this.setState({isOpen: true, start, end});
    };

    dismiss = () => {
        this.setState({isOpen: false});
    };

    onPushQuikButton = (v) => {
        let startTime = '';
        let endTime;
        // 早7点~早6点 报表时间
        let currentMoment = moment();
        currentMoment.add(1, 'days');
        const isToday = currentMoment.hours() <= 6;


        if (v === 'today') {
            let offset = 1;
            if (isToday) {
                offset = 2;
            }
            startTime = moment().add(1 - offset, 'days').format('YYYY-MM-DD');
            endTime = moment().add(1 - offset, 'days').format('YYYY-MM-DD');
        } else if (v === 'lastday') {
            let offset = 1;
            if (isToday) {
                offset = 2;
            }
            startTime = moment().add(0 - offset, 'days').format('YYYY-MM-DD');
            endTime = moment().add(0 - offset, 'days').format('YYYY-MM-DD');
        } else if (v === 'week') {
            let offset = 1;
            startTime = moment().isoWeek(moment().isoWeek() - (1 - offset)).startOf('isoWeek').format('YYYY-MM-DD');   //这样是年月日的格式
            endTime = moment().isoWeek(moment().isoWeek() - (1 - offset)).endOf('isoWeek').format('YYYY-MM-DD'); //这样是时间戳的格式
        } else if (v === 'lastweek') {
            let offset = 1;
            startTime = moment().isoWeek(moment().isoWeek() - offset).startOf('isoWeek').format('YYYY-MM-DD');   //这样是年月日的格式
            endTime = moment().isoWeek(moment().isoWeek() - offset).endOf('isoWeek').format('YYYY-MM-DD'); //这样是时间戳的格式

        } else if (v === 'month') {
            let offset = 1;
            startTime = moment().month(moment().month() - (1 - offset)).startOf('month').format('YYYY-MM-DD');
            endTime = moment().month(moment().month() - (1 - offset)).endOf('month').format('YYYY-MM-DD');
        } else if (v === 'lastmonth') {
            let offset = 1;
            startTime = moment().month(moment().month() - offset).startOf('month').format('YYYY-MM-DD');
            endTime = moment().month(moment().month() - offset).endOf('month').format('YYYY-MM-DD');
        }

        this.setState({start: startTime, end: endTime});
    };

    renderPannableHeader = props => {
        return (
            <View>
                <View margin-10 row center>
                    <Text style={{...commonStyles.text_black_17}}>筛选查询</Text>
                </View>
                <View height={1} bg-line/>
            </View>
        );
    };

    render_item = ({item, index}) => {
        const {selectIndex} = this.state;
        return (
            <TouchableOpacity style={{width: '33%'}} centerH onPress={() => {
                this.setState({selectIndex: index}, () => {
                    switch (index) {
                        case 0:
                            this.onPushQuikButton('lastday');
                            break;
                        case 1:
                            this.onPushQuikButton('today');
                            break;
                        case 2:
                            this.onPushQuikButton('lastweek');
                            break;
                        case 3:
                            this.onPushQuikButton('week');
                            break;
                        case 4:
                            this.onPushQuikButton('lastmonth');
                            break;
                        case 5:
                            this.onPushQuikButton('month');
                            break;
                    }
                });
            }}>
                <View center paddingH-10 paddingV-5 style={{
                    backgroundColor: index == selectIndex ? '#397AFE' : '#ffffff',
                    ...styles.tab_item,
                }}>
                    <Text
                        style={index == selectIndex ? commonStyles.text_white_12 : styles.table_title}>{item.title}</Text>
                </View>
            </TouchableOpacity>
        );
    };

    render() {
        const {isOpen, dateTypes, start, end} = this.state;
        logger('start', start, end);
        return (
            <Dialog
                migrate
                width={'70%'}
                height={'50%'}
                center
                containerStyle={styles.roundedDialog}
                visible={isOpen}
                onDismiss={this.dismiss}
                renderPannableHeader={this.renderPannableHeader}
            >
                <View flex paddingH-15>
                    <View row centerV marginT-20>
                        <Text style={commonStyles.text_black_13}>起始时间:</Text>
                        <DatePicker
                            customStyles={{dateInput: styles.dateInput}}
                            style={styles.dateView}
                            date={start}
                            locale={'zh-Hans'}
                            androidMode="spinner"
                            mode="date"
                            format="YYYY-MM-DD"
                            confirmBtnText="确定"
                            cancelBtnText="取消"
                            showIcon={false}
                            onDateChange={(start) => this.setState({start})}
                        />
                    </View>
                    <View row centerV marginT-10 marginB-20>
                        <Text style={commonStyles.text_black_13}>截止时间:</Text>
                        <DatePicker
                            customStyles={{dateInput: styles.dateInput}}
                            style={styles.dateView}
                            date={end}
                            locale={'zh-Hans'}
                            androidMode="spinner"
                            mode="date"
                            format="YYYY-MM-DD"
                            confirmBtnText="确定"
                            cancelBtnText="取消"
                            showIcon={false}
                            onDateChange={(end) => this.setState({end})}
                        />
                    </View>
                    <View centerH>
                        <FlatList
                            data={dateTypes}
                            showsVerticalScrollIndicator={false}
                            keyboardShouldPersistTaps='always'
                            extraData={this.state}
                            numColumns={3}
                            keyExtractor={(item, index) => 'menu_' + index}
                            renderItem={this.render_item}
                            ItemSeparatorComponent={() => <ListSeparator backgroundColor={'transparent'} height={10}/>}
                        />
                    </View>
                    <Button label={'查询'}
                            style={{
                                backgroundColor: '#397AFE',
                                borderRadius: 8,
                                marginTop: 20,
                                height: 44,
                                marginHorizontal: 20,
                            }}
                            labelStyle={{color: '#FFFFFF', fontWeight: '400'}}
                            onPress={() => {
                                this.props.callBack(start, end);
                                this.dismiss();
                            }}/>
                </View>
            </Dialog>
        );
    }
}

const styles = StyleSheet.create({
    roundedDialog: {
        backgroundColor: 'white',
        borderRadius: 5,
    },
    tab_item: {
        borderRadius: 3,
        width: '90%',
        borderWidth: 0.5,
        borderColor: '#9BAEC8',
    },
    table_title: {fontSize: 12, color: '#9BAEC8'},
    dateInput: {
        borderRadius: 3,
        borderWidth: 0.5,
        paddingVertical: 5,
        borderColor: '#9BAEC8',
    },
    dateView: {
        borderWidth: 0,
        marginLeft: 10,
    },
});


